<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="HandheldFriendly" content="true" />
    <meta name="keywords" content="杰视帮" />
    <meta name="description" content="杰视帮" />
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>杰视帮</title>
    <link rel="stylesheet" href="../css/common.css" />
    <link rel="stylesheet" href="../css/idangerous.swiper.css" />
    <!-- 首页样式 -->
    <link rel="stylesheet" href="../css/index.css" />
</head>

<body>
    
    <div class="header" id="top">
        <div class="wrapper">
            <div class="logo">
                <a href="/"><img src="../images/logo.png" alt="杰视帮"></a>
            </div>
            <ul class="nav">
                <li class="atthis"><a href="/">首页</a></li>
                <li><a href="/">线上课程</a></li>
                <li><a href="/">线下课程</a></li>
                <li><a href="/">作品展示</a></li>
                <li><a href="/">商业合作</a></li>
                <!-- <li><a href="/">联系我们</a></li> -->
                <li><a href="/">免费试看</a></li>
            </ul>
            <div class="right">
                <a href="#" class="icon-00"></a>
                <a href="#" class="icon-01"></a>
                <a href="#" class="icon-02"></a>
            </div>
        </div>
    </div>

    <div class="banner">
        <div class="banner-content">
            <div class="swiper-container swiper-banner">
                <div class="swiper-wrapper">
                    <div class="swiper-slide">
                        <img src="../images/banner.jpg" height="716" width="1920" alt="技能卡">
                    </div>
                    <div class="swiper-slide">
                        <img src="../images/banner.jpg" height="716" width="1920" alt="技能卡">
                    </div>
                </div>
            </div>
            <!-- 如果需要分页器 -->
            <div class="swiper-pagination banner-pagination"></div>
            <!-- 如果需要导航按钮 -->
            
        </div>
        <div class="swiper-button-prev"></div>
        <div class="swiper-button-next"></div>
    </div>

    <div class="indexNav">
        <ul>
            <li><a href="#">
                <h3>线下课程</h3>
                <p>电商设计全套必备知识<br>设计营销策划综合训练</p>
                <span class="tips"><img src="../images/index/icon_arr.png" alt="">接收0基础学员<b>90天亲授</b></span>
            </a></li>
            <li><a href="#">
                <h3 class="icon-01">线上基础</h3>
                <p>透视/光影/后期/创意<br>线上精品高级合成班</p>
                <span class="tips"><img src="../images/index/icon_arr.png" alt="">需审核通过方可报名<b>19节课程</b></span>
            </a></li>
            <li><a href="#">
                <h3  class="icon-02">线上高级</h3>
                <p>透视/光影/后期/创意<br>线上精品高级合成班</p>
                <span class="tips"><img src="../images/index/icon_arr.png" alt="">需审核通过方可报名<b>23节课程</b></span>
            </a></li>
            <li><a href="#">
                <h3 class="icon-03">优秀作品</h3>
                <p>学员/老师优秀作品<br>商业作品案例集</p>
                <span class="tips"><img src="../images/index/icon_arr.png" alt="">学习前后作品对比<b>优秀作品</b></span>
            </a></li>
            <li><a href="#">
                <h3 class="icon-04">商业合作</h3>
                <p>品牌升级/电商设计<br>各类商业海报等等</p>
                <span class="tips"><img src="../images/index/icon_arr.png" alt="">服务各类顶级天猫卖家<b>合作咨询</b></span>
            </a></li>
        </ul>
    </div>

    <div class="footer">
        <div class="wrapper">
            <div class="left">
                <img src="../images/logo.png" alt="杰视帮">
                <p>杰视帮隶属成都杰士帮教育咨询有限公司，是国内专业靠前的高端电商设计培训机构，致力于打造高端电商视觉设计。由淘宝大学官方认证讲师，68Desigh十佳设计师，站酷推荐设计师，拥有15年行业设计经验，从游戏主美转战电商设计，并服务多家过亿级卖家的人气资深设计指导：蒋小亮（网名：杰克 sean）创办。目前已向各行业输送数百名优秀设计师，并助力多位学员升职加薪成功！</p>
            </div>

            <!-- <div class="footer-nav">
                <div class="title">关于</div>
                <ul>
                    <li><a href="#">关于我们</a></li>
                    <li><a href="#">版权声明</a></li>
                    <li><a href="#">隐私保护</a></li>
                </ul>
            </div> -->
            <div class="footer-nav">
                <div class="title">联系</div>
                <ul>
                    <li><a href="javascript:void(0);">联系我们</a></li>
                    <li><a href="#">商务合作</a></li>
                </ul>
            </div>
            <div class="weixin">
                <img src="../images/img_ewm.jpg" alt="微信二维码">
                <p>关注杰视帮微信</p>   
            </div>
        </div>
    </div>

    <div class="floor">
        <a href="#top"></a>
    </div>

    <script src="../js/jquery.min.js"></script>
    <script src="../js/idangerous.swiper.js"></script>

    <script>
        $(function () {
            // 首页banner
            var mySwiperTop = new Swiper(".swiper-banner", {
                loop: true,
                autoplay: 0,
                pagination: ".banner-pagination",
                paginationClickable: true
            });
            $('.swiper-button-next').on('click', function(e){
                e.preventDefault()
                mySwiperTop.swipePrev()
            })
            $('.swiper-button-prev').on('click', function(e){
                e.preventDefault()
                mySwiperTop.swipeNext()
            })
        })
    </script>
</body>

</html>